:root{
	--background:#acc7f2;
	--name-color-a:#111;
	--name-color-b:#111;
	--bak-a: #eee;
	--bak-b: #ffe7b6;
	--color-a: #111;
	--color-b: #111;
	--date-background:rgba(0,0,0,.3);
	--date-color:#fff;
}

.board-comment-list {background:var(--background); padding:20px; max-width:500px; margin:0 auto; display: grid;}


.ss-line {display: flex; gap:8px; margin:20px 0; max-width:70%;}
.ss-line .line-head {min-width:48px;}
.ss-line .avatar-img {border-radius:4px;}
.ss-line .line-detail{padding:8px 12px;}
.ss-line .line-right{display:flex; flex-direction: column; gap:8px;}
.ss-line .ss-name {font-size:13px;}

.ss-line.dv-a {}
.ss-line.dv-b {flex-direction: row-reverse; justify-self: self-end;}
.ss-line.dv-b .line-right { align-items: flex-end;}
.ss-line.dv-a .ss-name {color:var(--name-color-a);}
.ss-line.dv-b .ss-name {color:var(--name-color-b);}
.ss-line.dv-a .line-detail{background:var(--bak-a); color:var(--color-a); border-radius:0 12px 12px 12px;}
.ss-line.dv-b .line-detail{background:var(--bak-b); color:var(--color-b); border-radius:12px 0 12px 12px;}

.dv-a + .dv-a .ss-name,.dv-b + .dv-b .ss-name, .dv-a + .dv-a .avatar-img,.dv-b + .dv-b .avatar-img {display:none;}
.dv-a + .dv-a.ss-line, .dv-b + .dv-b.ss-line {margin-top:-8px;}

.update_list {position: relative; align-self: flex-end;}
.update_button {align-self:flex-end;}
.ss-line.dv-a .update_menu {right:0; bottom:24px; transform:translateX(+100%);}
.ss-line.dv-b .update_menu {left:0; bottom:24px; transform:translateX(-100%);}

.ss-date-line .date-in {background:var(--date-background); color:var(--date-color);  padding: 6px 8px; border-radius: 20px;}